<template>
  <div>
    <h1>login</h1>
    账号：
    <input v-model="username" />
    密码：
    <input v-model="password" />
    <button @click="handleLoginClick">登陆</button>
  </div>
</template>

<script>
// 如何在组件中使用vuex？
import axios from 'axios'
// 1. 通过引入vuex访问vuex的东西
// 2. 通过this访问vuex的方法
// import {} from 'vuex'
export default {
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    async handleLoginClick() {
      console.log('click')
      const res = await axios.post('/api/login', {
        username: this.username,
        password: this.password,
      })
      if (res.data.code === 0) {
        const token = res.data.data.token

        console.log('store', this.$store)

        /**
         * store -> commit -> 对应的就是mutaions这个对象属性
         * store -> dispatch -> 对应的就是actions这个对象属性
         * store -> state 就是对应着vuex中的state
         */
        // 通过this访问vuex。通过commit这个方法调用mutaions中的函数
        this.$store.commit('set_token', token)

        // localStorage.setItem('token', token)
        // console.log(this.$route, '路由信息')
        // 如果用户有想去的页面，拿到参数，处理后，跳转，否则跳转到home
        const fullpath = this.$route.query.fullPath || '/home'
        // 弹出框提示跳转成功
        this.$router.push(fullpath)
        // console.log('res:', res.data.data.token)
      }
    },
  },
}
</script>

<style></style>
